<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>访客地域统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC__/admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/admin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>来自省份</th>
                    <th>访客数量</th>
                </tr>
                </thead>
                <tbody>
                {foreach name="area" item="vo"}
                <tr>
                    <td>{$vo['name']}</td>
                    <td>{$vo['value']}</td>
                </tr>
                {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div id="main" style="width: 100%;height:600px;"></div>
        </div>
    </div>
</div>

<script src="__STATIC__/admin/layui/layui.js"></script>
<script src="__STATIC__/common/js/jquery.min.js"></script>
<script src="__STATIC__/common/js/echarts.js"></script>
<script>

    function randomData() {
        return Math.round(Math.random()*500);
    }

    var uploadedDataURL = "__STATIC__/common/js/china.json";
    $.get(uploadedDataURL, function (d) {

        var myChart = echarts.init(document.getElementById('main'));

        echarts.registerMap('china', d);
        var option = {
            backgroundColor: '#FFFFFF',
            title: {
                text: '访客地域分布',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item'
            },

            //左侧小导航图标
            visualMap: {
                show : true,
                x: 'left',
                y: 'center',
                text: ['高','低'],
                inRange: {
                    color: ['#e0ffff', '#1c97f5']
                },
            },

            //配置属性
            series: [{
                name: '数据',
                type: 'map',
                mapType: 'china',
                roam: true,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: {$areaJson|raw}
            }]
        };
        myChart.setOption(option);
    });

</script>
</body>
</html>
